<template>
  <!-- 投诉 -- 详情页 -->
  <view class="complaintDetail">
    <view class="wrapper">
      <u-form
        :model="form"
        ref="form"
        label-width="280"
        labelPosition="’top‘"
        :error-type="errorType"
      >
        <view class="wrapper-item">
          <view class="wrapper-bar">
            <view class="wrapper-bartitle">
              <text></text>
              投诉详情
            </view>
            <view class="brt-time">{{ form.complaintTime }}</view>
          </view>
          <view style="padding-top: 20rpx"><u-line></u-line></view>
          <u-form-item label="派出所:" :borderBottom="false">
            <view class="conView">{{ form.policeAgencyName }}</view>
          </u-form-item>
          <u-form-item label="投诉分类:" :borderBottom="false">
            <view class="conView">{{ form.complaintClassification }}</view>
          </u-form-item>
          <u-form-item label="投诉对象:" :borderBottom="false">
            <view class="conView">{{ form.complaintObject }}</view>
          </u-form-item>
          <u-form-item label="投诉内容:" :borderBottom="false">
            <view
              class="conView"
              style="padding-bottom: 20rpx; word-break: break-all"
            >
              {{ form.complaintContent }}
            </view>
            <view
              class="photo-class"
              :class="purifyImageList.length <= 2 ? 'photoAfter' : ''"
            >
              <image
                :src="item"
                v-for="(item, i) in purifyImageList"
                :key="i"
                mode="aspectFill"
                @click="pvwImage([item])"
              ></image>
            </view>
          </u-form-item>
        </view>

        <!-- 回复详情 -->
        <view class="wrapper-item" v-if="form.status == 2">
          <view class="wrapper-bar">
            <view class="wrapper-bartitle">
              <text></text>
              回复详情
            </view>
            <view class="brt-time">{{ form.replyTime }}</view>
          </view>
          <view style="padding-top: 20rpx"><u-line></u-line></view>
          <u-form-item label="回复单位:" :borderBottom="false">
            <view class="conView">{{ form.policeAgencyName }}</view>
          </u-form-item>
          <u-form-item label="回复内容:" :borderBottom="false">
            <view class="conView">
              {{ form.replyContent }}
            </view>
          </u-form-item>
        </view>
      </u-form>
    </view>
  </view>
</template>

<script>
import { complaintMessageDetail } from "@/api/home.js";
import { imagesPathList } from "@/api/myself.js";
import {
  navBack,
  handleClickRouter,
  formatters,
  pvwImage,
} from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      allCode: uni.getStorageSync("allCode"),
      options: {},
      form: {},
      errorType: ["none"],
      purifyImageList: [],
    };
  },
  onLoad(options) {
    this.options = options;
    this.getDetail();
  },
  methods: {
    handleClickRouter,
    navBack,
    formatters,
    pvwImage,
    getDetail() {
      imagesPathList({ bizId: this.options.id, bizType: 22 }).then((res) => {
        if (res.code == 200 && res.result.length) {
          for (let v of res.result) {
            this.purifyImageList.push(this.imgPrefix + v.path);
          }
        }
      });

      complaintMessageDetail({ id: this.options.id }).then((res) => {
        if (res.code == 200) {
          this.form = res.result;

          this.allCode["complaint_classification"].map((v) => {
            if (v.value == res.result.complaintClassification) {
              this.form.complaintClassification = v.text;
            }
          });
        }
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.complaintDetail {
  flex: 1;
  background-color: #f3f3f3;

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);

    .wrapper-item {
      margin-bottom: 1vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        height: 40rpx;
        .wrapper-bartitle {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;
          font-weight: bold;

          text {
            position: absolute;
            left: -20rpx;
            display: inline-block;
            margin-right: 20rpx;
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #2488f5;
          }
        }

        .brt-time {
          color: #333333;
          font-size: 26rpx;
          font-weight: 500;
        }
      }

      .conView {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .photo-class {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;

      image {
        margin-bottom: 15rpx;
        width: 200rpx;
        height: 160rpx;
      }
    }

    .photoAfter::after {
      content: "";
      width: 200rpx;
    }
  }
}
</style>
